<template>
  <el-input
    v-model="modelValue"
    :placeholder="placeholder"
    :clearable="clearable"
    @input="handleInput"
    @change="handleChange" />
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  value: {
    type: [String, Number],
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  clearable: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:value', 'change'])

const modelValue = ref(props.value)

watch(() => props.value, (newVal) => {
  modelValue.value = newVal
})

const handleInput = (val) => {
  emit('update:value', val)
}

const handleChange = (val) => {
  emit('change', val)
}
</script> 